<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="子女">
          <el-select v-model="searchParam.memberFamilyId" placeholder="请选择子女" clearable>
            <el-option
              v-for="item in memberFamilyList"
              :key="item.id"
              :label="item.userName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="作业名称">
          <el-input placeholder="请输入作业名称" v-model.trim="searchParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="是否可选">
          <el-select v-model="searchParam.optional" placeholder="作业是否可选" clearable>
            <el-option label="非强制" :value="1"></el-option>
            <el-option label="强制完成" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="作业类型">
          <el-select v-model="searchParam.type" placeholder="请选择作业类型" clearable>
            <el-option label="当天必须完成" :value="1"></el-option>
            <el-option label="周期作业" :value="2"></el-option>
            <el-option label="限时作业" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="作业状态">
          <el-select v-model="searchParam.status" placeholder="请选择作业类型" clearable>
            <el-option label="等待执行" :value="10"></el-option>
            <el-option label="进行中" :value="20"></el-option>
            <el-option label="已完成" :value="90"></el-option>
            <el-option label="已延期" :value="92"></el-option>
            <el-option label="延期完成" :value="91"></el-option>
            <el-option label="停止" :value="92"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="额外作业">
          <el-select v-model="searchParam.additional" placeholder="请选择是否额外作业" clearable>
            <el-option label="必须完成" :value="1"></el-option>
            <el-option label="额外" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学科类别">
          <el-select v-model="searchParam.subject" placeholder="请选择学科类别" clearable>
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="难度系数">
          <el-select v-model="searchParam.difficulty" placeholder="请选择难度系数" clearable>
            <el-option label="一星" :value="1"></el-option>
            <el-option label="二星" :value="2"></el-option>
            <el-option label="三星" :value="3"></el-option>
            <el-option label="四星" :value="4"></el-option>
            <el-option label="五星" :value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否检查">
          <el-select v-model="searchParam.checkHomework" placeholder="请选择作业是否检查" clearable>
            <el-option label="未检查" :value="1"></el-option>
            <el-option label="永久不检查" :value="2"></el-option>
            <el-option label="已检查" :value="3"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="mini" @click="getHomeworkListPageBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveHomework">新增</el-button>
          <!--太多东西要处理，小屏幕适配，权限问题，等等，暂不考虑-->
          <!--<el-button type="primary" size="mini" @click="getLargeScreenQrCodeBefore">大屏二维码</el-button>-->
        </el-form-item>

      </el-form>


    </el-card>




    <!--列表部分-->
    <el-card style="margin-top: 10px">

      <el-table
        :data="homeworkTable.data"
        max-height="500px"
        height="500px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="作业名称"
        >
        </el-table-column>

        <el-table-column
          prop="memberFamilyName"
          label="所属子女"
        >
        </el-table-column>

        <el-table-column
          prop="type"
          label="作业类型"
        >
          <template slot-scope="scope">
            <el-tag type="" size="mini" v-if="scope.row.type === 1">当天完成</el-tag>
            <el-tag type="success" size="mini"  v-else-if="scope.row.type === 2">周期性</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.type === 3">限时</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="startTime"
          label="开始时间"
        >
        </el-table-column>

        <el-table-column
          prop="deadline"
          label="截止时间"
        >
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag type="info" size="mini" v-if="scope.row.status === 10">待进行</el-tag>
            <el-tag               size="mini"  v-else-if="scope.row.status === 20">进行中</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.status === 90">已完成</el-tag>
            <el-tag type="danger" size="mini" v-else-if="scope.row.status === 92">已延期</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.status === 91">延期完成</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.status === 93">停止</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="subjectName"
          label="学科"
        >
        </el-table-column>

        <!--<el-table-column-->
        <!--  prop="checkHomework"-->
        <!--  label="检查"-->
        <!--&gt;-->
        <!--  <template slot-scope="scope">-->
        <!--    <el-tag type="info" size="mini" v-if="scope.row.checkHomework === 1">未检查</el-tag>-->
        <!--    <el-tag size="mini" v-else-if="scope.row.checkHomework === 2">永久不检查</el-tag>-->
        <!--    <el-tag type="success" size="mini" v-else-if="scope.row.checkHomework === 3">已检查</el-tag>-->
        <!--  </template>-->
        <!--</el-table-column>-->


        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toOpenHomeworkDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="openUpdHomework(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delHomeworkByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页部分-->
      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px; "
        background
        layout="total, prev, pager, next, jumper"
        @current-change="homeworkPageCurrentChange"
        :page-size="homeworkTable.size"
        :current-page="homeworkTable.current"
        :pager-count="5"
        :total="homeworkTable.total">
      </el-pagination>

    </el-card>

    <HomeworkSaveUpd ref="HomeworkSaveUpdRef" @getHomeworkListPage="getHomeworkListPage"/>
    <HomeworkDetailed ref="HomeworkDetailedRef" />
    <HomeworkQrCode ref="HomeworkQrCodeRef"/>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import HomeworkSaveUpd from './HomeworkSaveUpd.vue'
  import HomeworkDetailed from './HomeworkDetailed.vue'
  import HomeworkQrCode from './HomeworkQrCode.vue'

  export default {
    name: "HomeworkList",
    components:{
      HomeworkSaveUpd,
      HomeworkDetailed,
      HomeworkQrCode,
    },
    data(){
      return {
        // 查询参数
        searchParam: {
          // 作业名称
          name: null,
          // 作业是否可选
          optional: null,
          // 作业类型
          type: null,
          // 完成状态
          status: null,
          // 是否额外作业
          additional: null,
          // 学科类别
          subject: null,
          // 难度系数
          difficulty: null,
          // 作业是否检查
          checkHomework: null,
          // 请选择子女
          memberFamilyId: null,
        },
        // 学科类别列表
        subjectList: [],
        // 子女
        memberFamilyList: [],
        // 表格
        homeworkTable: {
          // 表格数据
          data: [],
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    methods: {
      /**
       * 打开二维码获取窗口
       */
      getLargeScreenQrCodeBefore(){
        this.$refs.HomeworkQrCodeRef.openLargeScreenQrCodeBefore()
      },
      /**
       * 重置查询
       */
      resetQuery(){
        this.searchParam = {
          // 作业名称
          name: null,
          // 作业是否可选
          optional: null,
          // 作业类型
          type: null,
          // 完成状态
          status: null,
          // 是否额外作业
          additional: null,
          // 学科类别
          subject: null,
          // 难度系数
          difficulty: null,
          // 作业是否检查
          checkHomework: null,
          // 请选择子女
          memberFamilyId: null,
        }
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      homeworkPageCurrentChange(value){
        this.homeworkTable.current = value
        this.getHomeworkListPage()
      },
      /**
       * 打开新增作业
       */
      openSaveHomework() {
        this.$refs.HomeworkSaveUpdRef.openPageHomework('save', null, this.subjectList, this.memberFamilyList)
      },
      /**
       * 查询前重置分页
       */
      getHomeworkListPageBefore(){
        this.homeworkTable.current = 1
        this.getHomeworkListPage()
      },
      /**
       * 分页查询家庭作业
       */
      getHomeworkListPage(){
        this.searchParam.current = this.homeworkTable.current
        this.searchParam.size = this.homeworkTable.size

        http.post("/homework/getHomeworkListPage", this.searchParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.homeworkTable.total = data.total;
          this.homeworkTable.current = data.current;
          this.homeworkTable.size = data.size;
          // 处理数据
          this.homeworkTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 查看详情
       */
      toOpenHomeworkDetailed(homework){
        this.$refs.HomeworkDetailedRef.openHomeworkDetailed(homework)
      },
      /**
       * 打开修改
       */
      openUpdHomework(row){
        this.$refs.HomeworkSaveUpdRef.openPageHomework('upd', row, this.subjectList, this.memberFamilyList)
      },
      /**
       * 删除作业
       * @param row
       */
      delHomeworkByIdTips(row){
        this.$confirm('是否删除作业, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delHomeworkById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 逻辑删除家庭作业
       * @param row 当前行数据
       */
      delHomeworkById(row){
        http.post("/homework/delHomeworkById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getHomeworkListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取子女信息
       */
      getSonInfo(){
        http.post("/homework/getSonInfo", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.memberFamilyList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取家庭作业类型
       */
      getHomeworkType(){
        http.post("/homework/getHomeworkType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.subjectList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.$store.commit('navigationListChange', ['教育', '家庭作业'])
      this.getSonInfo()
      this.getHomeworkType()
      this.getHomeworkListPage()
    },
  }
</script>

<style scoped>

</style>
